<!-- 
  图片验证码组件：
    1. 调用接口获取图片验证码并渲染, 返回的是 svg 字符串，需要使用 v-html 
    2. 点击之后要刷新验证码
    3. 对外暴露一个 getCaptchaId 的函数，用于获取 captchaId
    4. 对外暴露一个 refresh 的函数，用于刷新 验证
 -->
<template>
  <div class="captcha" v-html="state.data" @click="refresh"></div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { getCaptcha } from '@/api/common'

// 创建一个响应式数据
const state = reactive({
  captchaId: '',
  data: ''
})

const refresh = async () => {
  try {
    const resp = await getCaptcha()
    state.captchaId = resp.data.captchaId
    state.data = resp.data.data
  } catch (error) {
    console.log('捕获到错误了', error)
  }
}

onMounted(() => {
  // 默认调用一次 refresh
  refresh()
})

// 对外的暴露
defineExpose({
  getCaptchaId() {
    return state.captchaId
  },
  refresh
})
</script>

<style lang="scss" scoped>
.captcha {
  margin-left: 10px;
  background-color: #ccc;
  cursor: pointer;

  :deep(svg) {
    display: block;
  }
}
</style>
